<!DOCTYPE html>
<html lang="en">
<head>
    {include file="common/meta_new" /}
</head>
<body class="F6">
<div id="app" class="point-wallet-page">
    <!-- header -->
    <div class="header">
        <div class="header-height"></div>
        <div class="header-wrap">
            <div class="header-content">
                <div class="left">
                    <a href="{:url('index/user/index');}">
                        <div class="go-back"><img src="/static/images/go-back.png" alt=""></div>
                    </a>
                    <div class="text">积分钱包</div>
                </div>
                <div class="title"></div>
            </div>
        </div>
    </div>
    <div class="top-wrap">
        <div class="bg">
            <img src="/static/images/point-wallet-bg.png" alt="">
        </div>
        <div class="content">
            <div class="left">
                <div class="point-row">
                    <div class="number">{$h5_score}</div>
                    <div class="coin"><img src="/static/images/coin.png" alt=""></div>
                </div>
            </div>
            <!--<a href="{:url('index/user/withdrawView');}">
                <div class="right">
                    <div>积分转移</div>
                    <img src="/static/images/right2.png" alt="">
                </div>
            </a>-->
            <div id="openScoreModal">
                <div class="right">
                    <div>积分转移</div>
                    <img src="/static/images/right2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="rows-wrap">
        <div class="title">积分明细</div>
        <div class="rows">
            <!--<div class="item">
                <div class="left">
                    <div class="text">
                        <div class="time">
                            放大发大水发生
                        </div>
                    </div>
                </div>
                <div class="right">100</div>
            </div>-->
        </div>
    </div>

    <style>
        /* 蒙层 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* 弹框 */
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            width: 300px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }

        /* 标题 */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
        }

        /* 关闭按钮 */
        .close-btn {
            font-size: 40px;
            cursor: pointer;
            background: none;
            border: none;
            color: red;
        }

        /* 内容 */
        .modal-content {
            margin-top: 15px;
        }

        /* 输入框 */
        .modal-content input {
            width: calc(100% - 20px);
            padding: 16px 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        /* 提交按钮 */
        .submit-btn {
            width: 100%;
            padding: 14px 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>

    <!-- 蒙层 -->
    <div class="overlay"></div>

    <!-- 弹框 -->
    <div class="modal">
        <div class="modal-header">
            <span>积分转移</span>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-content">
            <input type="number" placeholder="输入转移积分">
            <button class="submit-btn" onclick="confirm()">提交</button>
        </div>
    </div>
</div>
</body>
<script src="/static/js/common.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
    var page = 1;
    var pagesize = 20;

    renderScoreList(page, pagesize);

    function renderScoreList(incPage = 1, pagesize = 10) {
        scoreList(incPage, pagesize).then(res => {
            if (res.result == 1) {
                var html = ''
                res.data.forEach(val => {
                    html += `<div class="item">
                <div class="left">
                    <div class="text">
                        <div class="time">
                            ` + val.remark + `
                        </div>
                    </div>
                </div>
                <div class="right">` + val.score + `</div>
            </div>`
                })

                page = incPage + 1;

                if (incPage == 1) {
                    $('.rows').html(html);
                } else {
                    $('.rows').append(html);
                }
            } else {
                if (incPage == 1) {
                    $('.rows').html('');
                } else {
                    layer.msg(res.msg)
                }
            }
        }).catch(error => {
            layer.msg('请求失败')
        });
    }

    window.addEventListener('scroll', function () {
        // 获取页面的滚动高度、视口高度和文档总高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

        // 判断是否滚动到页面底部
        if (scrollTop + clientHeight >= scrollHeight) {
            renderScoreList(page, pagesize);
        }
    });

    $(document).ready(function () {
        // 打开弹框
        $("#openScoreModal").click(function () {
            $(".overlay, .modal").fadeIn();
        });

        // 关闭弹框
        $(".close-btn, .overlay").click(function () {
            $(".overlay, .modal").fadeOut();
        });
    });

    function confirm() {
        var score = $('.modal-content input').val();
        if (score <= 0) {
            layer.msg('请输入正确的积分', {icon: 2});
            return false;
        }

        moveScoreToMini(score).then(res => {
            if (res.result == 1) {
                layer.msg(res.msg, {icon: 1, time:500}, function () {
                    window.location.reload();
                })
            } else {
                layer.msg(res.msg, {icon: 2, time:500})
            }
        })
    }
</script>
</html>